var canvas = {},
    centerX = 0,
    centerY = 0,
    color = '',
    containers = document.getElementsByClassName('material-design')
context = {},
    element = {},
    radius = 0,

    requestAnimFrame = function() {
        return (
            window.requestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            window.oRequestAnimationFrame ||
            window.msRequestAnimationFrame ||
            function(callback) {
                window.setTimeout(callback, 1000 / 60);
            }
        );
    }(),

    init = function() {
        containers = Array.prototype.slice.call(containers);
        for (var i = 0; i < containers.length; i += 1) {
            canvas = document.createElement('canvas');
            canvas.style.cssText = "position:absolute;top:0;right:0;bottom:0;left:0;opacity: 0.25;";
            canvas.addEventListener('click', press, false);
            containers[i].appendChild(canvas);
            canvas.style.width = '100%';
            canvas.style.height = '100%';
            canvas.width = canvas.offsetWidth;
            canvas.height = canvas.offsetHeight;
        }
    },

    press = function(event) {
        for (var i = 0; i < containers.length; i += 1) {
            containers[i].lastChild.getContext('2d').clearRect(0, 0, 1000, 1000);
        }
        color = event.toElement.parentElement.dataset.color;
        element = event.toElement;
        context = element.getContext('2d');
        radius = 0;
        centerX = event.offsetX;
        centerY = event.offsetY;
        draw();
    },

    draw = function() {
        context.beginPath();
        context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
        context.fillStyle = color;
        context.fill();
        radius += 1;
        if (radius < (element.width - 30)) {
            requestAnimFrame(draw);
        } else {
            context.clearRect(0, 0, 1000, 1000);
        }
    };

init();